<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-11-15 16:15:24
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-11-23 15:51:52
 * @FilePath: \cxl-driving-training\src\components\title\Index.vue
-->
<template>
    <div :class="['title', big ? 'big' : '', small ? 'small' : '']">
        {{ title }}
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
//从父级接受参数
const prop = defineProps(['title', 'big', 'small'])
</script>

<style scoped>
.title {
    padding: 8px;
    background-color: var(--color-info-light-9);
    border-left: none;
    margin-bottom: 16px;
    font-size: 16px;
}
.title.big {
    background-color: transparent;
    font-size: 24px;
    font-weight: 600;
    padding: 0px 8px;
    line-height: 26px;
    border-left: 3px solid var(--color-primary);
}
.title.small {
    background-color: transparent;
    font-size: 14px;
    font-weight: 400;
    padding: 0px 8px;
    line-height: 26px;
    border-left: none;
    border-bottom: 1px solid var(--color-info-light-7);
    position: relative;
}
.title.small:before {
    content: '';
    width: 2px;
    height: 14px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    background-color: var(--color-primary);
}
</style>
